<template>
	<view style="margin-top: 20rpx;">
		<!-- 顶部文字 -->
		<view class=""
			style="display: flex;justify-content: space-between;padding:0 10px;background-color: #8ce308;border-radius: 10px 10px 0 0;font-size: 14rpx;">
			<view class="">
				VOTE
			</view>
			<view class="">
				啊水水
			</view>
		</view>
		<view class="voteitem"
			style="border-radius: 0 0 10px 10px;background-color: #9dff0a;padding: 10px;">

			<view class="questiontit" style="font-size: 35rpx;font-weight: 1000;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{vote.title}}</view>


		</view>
		<!-- 投票选项 -->
		<view class="" style="border-radius: 10px;padding: 10px;background-color: #9dff0a;">
			<view>
				<!-- :class="item.selected?'skillbar active':'skillbar'" -->
				<view class="skillbar" v-for="(item,index) in vote.vtList" :key="index" @click="selectVote(item)">
					<view class="skillbar-title" style="margin-left: 7px;">
						<text>{{item.title}}</text>
					</view>

					<view class="skillbar-bar" :class="{ 'active': item.selected, 'inactive': !item.selected }"
						:style="{ 'width': clickFlag ? item.percent + '%' : '' }"></view>



				</view>
			</view>
			<view class="voteright" style="">
				<view class="float: left;">
					<u-icon style="margin-right: 5px;" name="coupon" size="30"></u-icon>
					<span>投票</span>
					<span>|</span>
					<span>{{vote.nums}}</span>
					<span>人已参与</span>

				</view>


			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				clickFlag: false,
				


			}
		},
		props: {
			animationData: {
				type: Array
			},
			vote: {
				type: Object
			},
			topicId: {
				type: Number
			}
		},
		onLoad() {

		},
		mounted() {
			
			 this.$nextTick(() => {
				 let value=uni.getStorageSync("vote"+this.topicId)
				 
				 if(value){
				 	this.clickFlag = true
				 	
				 	this.vote.vtList.forEach(item => {
				 			
				 		if (value === item.title) {
						this.$emit("pSelectVote", item);
				 		
				 		}
				 	});
				 }
			 });
			
			 
		},
		methods: {
			async selectVote(item) {
				
				this.clickFlag = true

				this.$emit("pSelectVote", item);

				let form = {
					topicId: this.topicId,
					content: item.title
				}


				//存储缓存  value为topicId
				
				if (!uni.getStorageSync("vote"+this.topicId)) {
					//缓存中没有数据，存储进入缓存，发送请求
					uni.setStorageSync("vote"+this.topicId,item.title);
					//发送请求x
					await this.$u.api.voteClick(form)
				}else{
					uni.showToast({
						title:"你已经投票过了"
					})
				}

			}
		},

	}
</script>

<style>
	.skillbar {
		position: relative;
		display: block;
		margin-bottom: 10px;
		width: 100%;
		background: white;
		height: 35px;
		border-radius: 10px;
	}

	.skillbar-title {
		position: absolute;
		top: 0;
		left: 0;

		font-weight: 700;
		font-size: 13px;

	}

	.skillbar-title text {
		display: block;

		height: 35px;
		line-height: 35px;
	}

	.skillbar-bar {
		height: 35px;
		width: 0px;
		background: #00ff00;
		border-radius: 3px;
		transition: width 1s ease;

	}

	.skill-bar-percent {
		position: absolute;
		right: 10px;
		top: 0;
		font-size: 11px;
		height: 35px;
		line-height: 35px;
		color: #fff;
		color: rgba(0, 0, 0, .4)
	}

	.voteitem {
		/* padding: 20rpx 20rpx 0 20rpx; */
		background-color: #fff;
		display: flex;
	}

	.voteright {

		width: 100%;
		text-align: center;
		/* 	background-color: #eee;
		padding: 20rpx 0;
		border-radius: 10rpx;
		position: relative;
		min-height: 50px; */
	}

	/* .joinnums{
		
		font-size: 20px;
	}
	.jointxt{
		
		width: 100%;
		font-size: 10px;
		color: #435257;
		position: absolute;
		bottom: 20rpx;
		text-align: center;
	} */
	.questiontit {
		font-size: 30rpx;
		font-weight: 1000;
	}

	.questionbtm {
		font-size: 12px;
		color: #b0b0b0;
		width: 100%;
		bottom: 16rpx;
		display: inline-block;
		position: absolute;
	}

	.role {
		margin-right: 10rpx;
	}

	.role a {
		color: #006EFF;
	}

	.ctitle {
		width: 100%;
		height: 40px;
		background-color:
			#eee;
		color: #B0B0B0;
		line-height: 40px;
		padding-left: 16px;
		font-size: 14px;
	}

	.active {
		background-color: #39D754;
	}

	.inactive {
		/* 其他item的样式 */
		background-color: #43ff62;
		/* 举例：设置其他item的背景颜色为红色 */
	}
</style>